<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/commen/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{../../static/back/css/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/back/css/formSelects-v4.css}" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-col-md12">
        <form class="layui-form layui-form-pane" action="" id="frm-reg">
            <div class="layui-form-item">
                <label class="layui-form-label">所属板块</label>
                <div class="layui-input-block">
                    <select name="plateId" id="plateId" lay-filter="plateId" >

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">自定义分类</label>
                <div class="layui-input-block">
                    <select name="categoryId" id="categoryId" lay-filter="categoryId" xm-select="categoryId">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="title" th:value="${article != null ? article.title : ''}" placeholder="请输入文章标题" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">文章封面</label>
                <div class="layui-input-inline layer-inputs">
                    <input type="text" class="layui-input" name="articleImg" lay-filter="articleImg" id="articleImg" th:value="${article != null ? article.articleImg : ''}">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <button type="button" class="layui-btn" data-name="images" data-place="article"
                            id="articleImgButton"
                            style="margin-top: -8px;">上传图片
                    </button>
                </div>
            </div>

            <div class="layui-form-item">
                <img id="article_imgUrl" th:src="@{/static/back/images/default.png}"
                     style="width: 80px;height: 80px;border: 1px solid #cccccc;border-radius: 5px;">
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文章摘要</label>
                <div class="layui-input-block">
                    <textarea name="digest" id="digest" placeholder="请输入文章摘要,最多250个字符" lay-filter="digest"
                              class="layui-textarea" th:utext="${article != null ? article.digest : ''}"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label form_itme">文章内容</label>
                <div class="layui-input-block">
                    <textarea style="height: 600px;" placeholder="请输入文章内容" id="content" name="content" lay-filter="content"
                              class="input_textarea" cols="30" rows="10" th:utext="${article != null ? article.content : ''}"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline layer-inputs">
                    <input type="radio" name="status" value="0" title="草稿" th:checked="${article == null || (article != null && article.status == 0)}">
                    <input type="radio" name="status" value="1" title="发布" th:checked="${article != null && article.status == 1}">
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 50px;">
                <input type="hidden" name="id" id="id" th:value="${article != null ? article.id : ''}">
                <input type="hidden" id="plate" th:value="${article != null ? article.plateId : ''}">
                <input type="hidden" id="img" th:value="${article != null ? article.articleImg : ''}">
                <input type="hidden" id="category" th:value="${article != null ? article.categoryId : ''}">
                <input type="hidden" id="request_url" value="/back/article/setArticle">
                <button class="layui-btn" id="saveBtn" lay-submit="saveBtn" lay-filter="saveBtn">
                    <i class="layui-icon layui-icon-form"></i>保存
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script th:src="@{/static/back/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/static/commen/layui.js}"></script>
<script th:src="@{/static/back/js/admin.js}"></script>
<link th:href="@{/static/lib/layui_exts/cropper/cropper.css}" rel="stylesheet"/>
<script th:src="@{/static/lib/layui_exts/cropper/croppers.js}"></script>
<script>
    var t;
    layui.config({
        base: '/static/lib/layui_exts/cropper/' //layui自定义layui组件目录
    }).use(['form', 'croppers'], function () {
        var $ = layui.jquery
            , form = layui.form
            , croppers = layui.croppers
            , layer = layui.layer;

        //创建一个博文上传组件
        croppers.render({
            elem: '#articleImgButton'
            , saveW: 80     //保存宽度
            , saveH: 80
            , mark: 1 / 1    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "/common/upload?type=article"//图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (path) { //上传完毕回调
                $("#articleImg").val(path);
                $("#article_imgUrl").attr('src', path);
            }
        });

    });
    layui.extend({
        tinymce: '../tinymce/tinymce'
    }).use(['tinymce', 'util', 'layer'], function () {
        var $ = layui.jquery
            , tinymce = layui.tinymce
            , layer = layui.layer;
        t = tinymce;
        var edit = tinymce.render({
            elem: "#content"
            , height: 600
            , width: '100%'
        });
    });
    var form;
    layui.extend({
        formSelects: '../../../back/js/formSelects'
    }).use(['formSelects','form'], function () {
        var formSelects = layui.formSelects
        form = layui.form;
        var categoryId = $("#category").val();
        formSelects.data('categoryId', 'server', {
            url: '/back/category/allAategoryList',
            keyName: 'categoryName',
            keyVal: 'id',
            success: function (id, url, searchVal, result) {      //使用远程方式的success回调

                if (categoryId != '') {
                    var assistAuditArry = categoryId.split(",");
                    formSelects.value('categoryId', assistAuditArry);
                }
                console.log(result);    //返回的结果
            },
            error: function (id, url, searchVal, err) {           //使用远程方式的error回调
                //同上
                console.log(err);   //err对象
            },
        });
        var plateId = $("#plate").val();
        $.post("/back/plate/allPlateList",{},
            function (data) {
                $("#plateId").html("<option value='0'>随记</option>");
                $.each(data, function (index, item) {
                    var option;
                    if (plateId == '') {
                        option = new Option(item.plateName, item.id);
                    } else {
                        option = new Option(item.plateName, item.id);
                        if (item.id == plateId) {
                            option.setAttribute("selected", 'true');
                        }
                    }
                    $('#plateId').append(option);//往下拉菜单里添加元素
                    form.render('select'); //这个很重要
                })
            }
        );

        form.on('submit(saveBtn)', function(data) {
            debugger
            data.field.content = t.get('#content').getContent()
            layer.confirm('确认要保存吗？',function(index) {
                layer.load();
                var url = $('#request_url').val();
                console.log(url);
                $.ajax({
                    url:'' + url + '',
                    type:'Post',
                    data:data.field,
                    dataType: "json",
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.code == '1') {
                            layer.msg(data.msg, {icon: 1, time: 1000});
                            setTimeout(function () {
                                window.parent.location.reload();
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }, 1000);
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 1000});
                            return false;
                        }
                    },
                    error : function(e){
                        layer.closeAll('loading');
                        layer.msg(e.responseText, {icon: 2, time: 1000});
                    }
                });
                return false;
            });
            return false;
        });
    })
    $(function () {
        var img = $("#img").val();
        if(img != ''){
            $("#article_imgUrl").attr("src",img);
        }else {
            $("#article_imgUrl").attr("src",'http://images.nowcoder.com/head/746t.png');
        }
    })


</script>